﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>欢迎登录后台管理系统--模板之家 www.cssmoban.com</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" src="js/jquery.js"></script>
    <script src="js/cloud.js" type="text/javascript"></script>
    <!--引入Vue组件 -->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--引入axios(vue的异步交互)组件 -->
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!-- 导入自定义的js配置文件-->
    <script type="text/javascript" src="js/my_base_config.js"></script>

    <script language="javascript">
        $(function () {
            $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            $(window).resize(function () {
                $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            })
            //让login.html页面不在frameset里面显示
            if (self.location != top.location) {
                top.location.href = self.location.href;
            }
        });
    </script>

</head>

<body style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">
<div id="app">


    <div id="mainBody">
        <div id="cloud1" class="cloud"></div>
        <div id="cloud2" class="cloud"></div>
    </div>


    <div class="logintop">
        <span>欢迎登录后台管理界面平台</span>
        <ul>
            <li><a href="#">回首页</a></li>
            <li><a href="#">帮助</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>

    <div class="loginbody">

        <span class="systemlogo"></span>

        <div class="loginbox">
            <form>
                <ul>
                    <li><input name="username" type="text" class="loginuser" v-model="username"/></li>
                    <li><input name="password" type="text" class="loginpwd" v-model="password"/></li>
                    <li><input name="" type="button" class="loginbtn" value="登录" @click="login"/>
                        <label><input name="" type="checkbox" value="" checked="checked"/>记住密码</label>
                        <label><a href="#">忘记密码？</a></label></li>
                </ul>
            </form>

        </div>

    </div>


    <div class="loginbm">柳州城市职业学院版权所有</div>
</div>
<script>

    new Vue({
        el: '#app',
        data: {
            username:'test1',
            password:'1234567'
        },
        methods: {
            login(){//执行登录
                if (this.username==''){
                    alert("请输入账户名");
                }else if (this.password==''){
                    alert("请输入密码");
                }else{//表单验证通过
                    //访问后端登录接口
                    //post表示使用post方式访问后端接口
                    axios.post("/backstage/login",null,{
                        params:{
                            username:this.username,
                            password:this.password
                        }
                    }).then(response=>{//then表示获取接口的返回信息
                        const responseData=response.data;//response.data表示获取接口返回的数据（此处的登录接口是json数据）
                        if (responseData.success){//如果登录成功
                            location.href="main.html"
                        }else{//如果登录失败
                            alert(responseData.msg);
                        }
                    })
                }
            }
        }
    });
</script>

</body>
</html>
